<template>
  <el-dialog :title="showTitle" :visible="dialogVisible" width="630px" class="dialog-class" @close="handleClose">
    <el-form ref="dialogForm" :model="form" :inline="true" :rules="rules">
      <el-form-item prop="className" label="商品类型名称：" class="form-item">
        <el-input v-model="form.className" placeholder="请输入" maxlength="10" type="text" show-word-limit />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button class="cancel" @click="handleClose">取 消</el-button>
      <el-button v-loading="loading" type="primary" class="confirm" @click="handleSubmit">确 认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { postAddSkuClassAPI, putSkuClassAPI } from '@/api/goods'
export default {
  name: '',
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      rules: {
        className: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  computed: {
    showTitle() {
      return `${this.form.classId ? '修改' : '新增'}商品类型`
    }
  },
  watch: {},
  created() {},
  methods: {
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.$refs.dialogForm.resetFields()
      this.form = {}
    },
    async handleSubmit() {
      try {
        await this.$refs.dialogForm.validate()
        this.loading = true
        this.form.classId ? await putSkuClassAPI(this.form) : await postAddSkuClassAPI(this.form)
        this.$message.success(`${this.form.classId ? '修改' : '新增'}商品类型成功`)
        this.handleClose()
        this.$parent.getSkuClassSearch()
      } catch (error) {
        this.$message.error(error.response.data)
        console.log(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss">
.form-item{
  .el-form-item__content{
    width: 70%;
  }
}
.dialog-class{
  .el-dialog{
    /* height: 214px; */
  border-radius: 10px;
  }
  .el-dialog__body{
    padding: 10px 40px;
  }
}
</style>
<style scoped lang='scss'>
.dialog-footer{
  text-align: center;
}
.form-item{
  width: 100%;
}
.cancel{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important;
}
.confirm{
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
    border: none;
    margin-left: 34px;
}
</style>
